<template>
  <div class="right-history">
    <div class="global-trades">
      <div class="his_left with_com" v-show="hisSHow1==1">
        <div class="dtop-title flex">
          <p class="m-left-10 r_active" @click="hisTab(1)" v-show="hisSHow1==1">盘口</p>
          <p class="m-left-10" @click="hisTab(2)" v-show="hisSHow2==2">实时成交</p>
        </div>
        <div class="mod order-books cur" v-if="hisSHow1==1">
          <div class="mod-head">
            <div class="flex mod_red">
              <div class="active">
                <img src="../../assets/images/trade/11.png" alt="" srcset="">
              </div>
              <div>
                <img src="../../assets/images/trade/22.png" alt="" srcset="">
              </div>
              <div>
                <img src="../../assets/images/trade/33.png" alt="" srcset="">
              </div>
            </div>
          </div>
          <div class="mod-body" >
            <div class="mod-title">
              <span class="price" >价格 (USDT)</span> 
              <span class="amount" >数量 (LOL)</span> 
              <span class="total" >累计 (LOL)</span>
            </div>
            <!-- <dl  class="">
              <dt >
              <span class="price" >价格 (USDT)</span> 
              <span class="amount" >数量 (LOL)</span> 
              <span class="total" >累计 (LOL)</span>
            </dt>  -->
            <!-- <dd class="now-pric bs" > -->
            <div class="his_back">

              <div class="list_buy">
                <div class="list asks" >
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 15% 100%;" v-for="i in 16" :key="i">
                    <span  class="price color-sell">0.001998</span> 
                    <span  class="amount">2031.7499</span> 
                    <span  class="total">2031.7499</span>
                  </p>
              </div> 
              </div>
              <div class="now-pric">
                <div class="ticker-close" >
                <span class="color-down" >
                        0.001991
                        <em  class="estimate hide1440">≈ 0.0138 CNY</em>
                </span> 
                <a target="_self" href="/zh-cn/orderbooks/?type=exchange&amp;s=lol_usdt" data-v-1b2949ff="" >
                        更多
                </a>
              </div> 
              </div>
              
              <div class="list_sell">
                <div class="list bids" >
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 10% 100%;" v-for="i in 16" :key="i">
                  <span  class="price color-buy">0.001981</span> 
                  <span  class="amount">247347.4188</span> 
                  <span  class="total">386852.6018</span>
                  </p>
                </div>
              </div>
            
            </div>    
              <!-- <div class="ticker-close" >
                <span class="color-down" >
                        0.001991
                        <em  class="estimate hide1440">≈ 0.0138 CNY</em>
                </span> 
                <a target="_self" href="/zh-cn/orderbooks/?type=exchange&amp;s=lol_usdt" data-v-1b2949ff="" >
                        更多
                </a>
              </div>  -->
              <div class="list asks" style="display:none" >
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 30% 100%;">
                    <span  class="price color-sell">0.001998</span> <span  class="amount">2031.7499</span> 
                    <span  class="total">2031.7499</span>
                  </p>
              </div>   
              <div class="list bids" style="display:none">
                  <p  data-ee="fillPrice" class="single-orderbook" style="background-size: 10% 100%;">
                  <span  class="price color-buy">0.001981</span> 
                  <span  class="amount">247347.4188</span> 
                  <span  class="total">386852.6018</span>
                  </p>
              </div>
            <!-- </dd> -->
            <!-- </dl> -->
            </div>
        </div>

      </div>
      <div class="his_right with_com" v-show="hisSHow2==1">
        <div class="dtop-title flex">
          <p class="m-left-10 " @click="hisTab(1)" v-show="hisSHow1==2">盘口</p>
          <p class="m-left-10 r_active" @click="hisTab(2)" v-show="hisSHow2==1">实时成交</p>
        </div>
        <!-- 成交历史 -->
            <div class="history_box" >
            <div class="content-rt-history trade-table">
                <template>  
                  <el-table
                    :data='historicalBuyData'
                    :cell-style='myCellStyle'
                    max-height='732'
                  >
                    <el-table-column
                      :label='$t("time")||"时间"'   
                    >
                      <span
                        class=""
                        slot-scope="scope"
                        v-text="scope.row.writedate"
                      ></span>
                    </el-table-column>
                    <el-table-column label='价格(USDT)' width="100" align='right'>
                      <template slot-scope="scope">
                        <!-- 0是买入，1是卖出 -->
                        <span :class="scope.row.type=='0'?'color-success':'color-danger'">{{scope.row.price}} </span>
                      </template>
                    </el-table-column>
                    <el-table-column label='数量(BTC)' width="100" align='right'>
                      <template slot-scope="scope">
                        {{scope.row.number*1}}
                      </template>
                    </el-table-column>
                    <!-- <el-table-column align='right' :label='totalLabel' width="100">
                      <div slot-scope="scope">{{scope.row.total|toFix(3)}}</div>
                    </el-table-column> -->
                  </el-table>
                </template>
              </div>
              </div>
             
      </div>
    </div>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import klineRig from "@/components/TradeCom/klineRig.vue";
import rightHis from "@/components/TradeCom/rightHis.vue";
import inputExch from "@/components/TradeCom/inputExch.vue";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  name: "coin-Tab",
  components: { 
    klineRig,
    rightHis,
    inputExch
  },
  data() {
    return {
      hisSHow1:1,
      hisSHow2:1,
      screenWidth: document.body.clientWidth, // 屏幕尺寸
      mainCoinModel: mainCoinModel,
      currentId: 0,
      tableData: null,
      showLoading: true,
      activeName: "second",
      historicalBuyData: [
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
        {coin: 'BTC',price: '9378.12',rise: '+1.12',writedate:'16:15:01',number:'79.8551',}, 
      ]  
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        console.log(that.screenWidth);
        if(that.screenWidth<1400){
          this.hisSHow2=2;
        }else {
          this.hisSHow1=1;
          this.hisSHow2=1;
        }
      })()
    }
  },
  destroyed() {},
  methods: {
    formatter(row, column) {
        return row.rise;
    },
    // 单列样式
    myCellStyle() {
      return "padding:0px 0 !important;border:none";
    },
    // 获取自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentId = "opt";
      customList && customList.length > 0 && (this.tableData = customList);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    },
    // 历史记录切换
    hisTab(val){
      if(this.screenWidth<1440){
        console.log(this.screenWidth);
        if(val==1){
          this.hisSHow1=1;
          this.hisSHow2=2;
        }else if(val==2){
          this.hisSHow1=2;
          this.hisSHow2=1;
        }
      }else{
        return
      }
      
    },
  }
};
</script>

<style lang="scss" scoped>
.right-history{box-sizing:border-box;padding-right: 0px;}
.global-trades{
  display:flex;
  .with_com{flex: 1;}
  .dtop-title{
    height: 44px;line-height: 44px;color: #ffffff;background: #131625;
    width: 100%;
    border-bottom: 1px solid #131625;
    border-radius: 2px 2px 0 0;
    p{width: 70px;text-align: center;cursor: pointer;}
  }
  .order-books {
    width: 100%;
    min-width: 314px;
    height: 100%;
    .mod-head{
      height: 36px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      overflow: initial !important;
      position: relative;
      background: #171b2b;
      border-bottom:1px solid #111217;
      box-sizing: border-box;
    }
    .mod-body {
      height: calc(100% - 36px);
      overflow: hidden;
      .mod-title{
        background-color: #171b2b;color: #61688a;position: relative;top: 0;line-height: 28px;
          margin-top: 0;z-index: 1;padding:0 10px;display: flex;
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
      }
      dl {
        font-size: 12px;
        position: relative;
        height: 100%;
        dt{background-color: #171b2b;color: #61688a;position: relative;top: 0;line-height: 28px;
          margin-top: 0;z-index: 1;padding:0 10px;display: flex;}
        dd{background-color: #171b2b;border: 1px solid #111217;border-right: none;border-left: none;position: absolute;top: calc(50% - 5px);
            left: 0;width: 100%;} 
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
        p{
          color: #b0b8db;
          padding: 0 15px;
          line-height: 20px;
          height: 20px;
          display: flex;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          cursor: pointer;
          background-position: 0;
          background-size: 0 0;
          background-repeat: no-repeat;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-transition: margin .5s;
          -o-transition: margin .5s;
          transition: margin .5s;
          }
        
        
      }
      // ----------
      .his_back{background: #171b2b;}
      .list{
        
          p{
          color: #b0b8db;
          font-size: 12px;
          padding: 0 15px;
          line-height: 20px;
          height: 20px;
          display: flex;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          cursor: pointer;
          background-position: 0;
          background-size: 0 0;
          background-repeat: no-repeat;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-transition: margin .5s;
          -o-transition: margin .5s;
          transition: margin .5s;
          }
        .single-orderbook{justify-content:space-between;}  
        span {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: right;
            white-space: nowrap;
            &.price{text-align: left;}
        }
      }
      .now-pric {
          .ticker-close{
            color: #7085ac;padding: 0 16px;height: 32px;line-height: 32px;display: flex;justify-content:space-between;white-space:nowrap;
            border-top: 1px solid #111217;border-bottom: 1px solid #111217;
            span.color-down{color: #d74e5a;max-width: 230px;display: inline-block;white-space: normal;overflow: hidden;font-size: 16px;}
          }
        }
      .asks {
            display: flex;
            bottom: 0px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
            p{
              background-position:100%;
              background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 82, 82, .1)), to(rgba(250, 82, 82, .1)));
	background-image: -o-linear-gradient(rgba(250, 82, 82, .1), rgba(250, 82, 82, .1));
	background-image: linear-gradient(rgba(250, 82, 82, .1), rgba(250, 82, 82, .1))
            }
        }
        .bids{
            display: flex;
            bottom: 0px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
          // top: 34px;
          p {
              background-position:100%;
              background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(18, 184, 134, .1)), to(rgba(18, 184, 134, .1)));
              background-image: -o-linear-gradient(rgba(18, 184, 134, .1), rgba(18, 184, 134, .1));
              background-image: linear-gradient(rgba(18, 184, 134, .1), rgba(18, 184, 134, .1))
            }

        }
    }
  }
}

.order-books .mod-body dl dd>div {
    position: absolute;
    width: 100%;
    left: 0;
}
.order-books .mod-body dl .now-pric {
	height: 35px
}

.order-books .mod-body dl .now-pric .ticker-close {
	height: 35px;
	padding: 0 16px;
	line-height: 35px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	white-space: nowrap
}
.his_right {
  margin-left: 6px;
  .history_box{
      min-height: 734px;
      width: 316px;
    }
}
.mod_red{
  display: flex;align-items:center;cursor: pointer;
  >div{
    margin: 0 0px 0 15px;
    border:1px solid #383f66;padding: 2px 4px;border-radius: 2px;
    img{width: 10px;height: 10px;}
    &:hover{border-color: #357ce1;}
  }
  .active{border-color: #357ce1;}
}
@media screen and (max-width:1440px) {
	.order-books {
		width: 288px;
  }
  .order-books .mod-body dl dt {
		line-height: 24px
	}

	.order-books .mod-body dl .now-pric {
		height: 32px
	}

	.order-books .mod-body dl .now-pric .ticker-close {
		height: 30px;
		line-height: 30px;
		padding-left: 8px
  }
  .order-books .mod-body dl dd .asks {
		bottom: 33px
  }
  // 响应式
  // .his_right {display: none;}
  .right-history{width: 316px;}
  .his_right{margin-left: 0;}
  .r_active{border-top: 3px solid #357ce1;background: #171b2b;}
}
</style>